<template>
  <v-app>
    <v-toolbar app>
      <v-layout text-sm-right text-xs-left text-md-right wrap row>
        <v-flex xs0 sm0 md4></v-flex>
        <v-flex xs12 sm12 md8>
          <v-btn color="error" flat class="hidden-xs-only">HOW IT WORKS</v-btn>
          <v-btn color="error" flat class="hidden-xs-only">ABOUT US</v-btn>
          <v-btn color="error" flat outline class="hidden-xs-only">LOGIN IN</v-btn>
          <v-btn color="error" class="hidden-xs-only">SIGN UP</v-btn>
          <v-toolbar-side-icon class="hidden-sm-and-up"></v-toolbar-side-icon>
          <span class="hidden-sm-and-up" style="color: #fe653b;font-size: 1.5em">Study</span>
        </v-flex>
      </v-layout>
    </v-toolbar>

    <v-content>
      <HelloWorld/>
    </v-content>
  </v-app>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  data() {
    return {
      //
    };
  }
};
</script>
<style>
@media screen and (max-width: 768px) {
  .v-toolbar {
    box-shadow: none;
    border-bottom: 2px solid rgb(254, 101, 59);
  }
}
</style>